<template>
  <view class="u-center">
    <!-- 已登录 -->
    <view class="header-img" v-if="vuex_userInfo.isLogin">
      <u-image
        width="150rpx"
        height="150rpx"
        :lazy-load="true"
        :src="vuex_userInfo.avatarUrl"
        shape="circle"
      ></u-image>
      <view class="the-name">{{ vuex_userInfo.nickName }}</view>
    </view>
    <!-- 未登录 -->
    <view class="header-img" v-else>
      <u-image
        width="150rpx"
        height="150rpx"
        :src="src"
        shape="circle"
      ></u-image>
      <!-- <view class="the-name">您好,尚未登录，点击去登录</view> -->
      <u-button
        :custom-style="customStyle"
        :hair-line="false"
        shape="circle"
        size="mini"
        @click="toLogin"
      >
        <i class="custom-icon-weixin custom-icon"></i
        >&nbsp;您好,尚未登录，点击去登录
      </u-button>
    </view>
    <!-- 我的服务 -->
    <view class="my-servse">
      <view class="the-serve-kind">
        <u-grid :col="4" :border="false">
          <u-grid-item>
            <u-image
              width="100rpx"
              height="100rpx"
              :src="require('@/static/userCenter/lxkf.png')"
              shape="circle"
              style="margin-bottom: 0px"
            ></u-image>
            <tui-button type="black" plain link open-type="contact"
              >业务合作</tui-button
            >
          </u-grid-item>
          <u-grid-item @click="toServe(serveList[1])">
            <u-image
              width="100rpx"
              height="100rpx"
              :src="require('@/static/userCenter/wddd.png')"
              shape="circle"
              style="margin-bottom: 0px"
            ></u-image>
            <tui-button type="black" plain link>我的订单</tui-button>
          </u-grid-item>
          <u-grid-item @click="toServe(serveList[2])">
            <u-image
              width="100rpx"
              height="100rpx"
              :src="require('@/static/userCenter/wdzl.png')"
              shape="circle"
              style="margin-bottom: 0px"
            ></u-image>
            <tui-button type="black" plain link>我的信息</tui-button>
          </u-grid-item>
          <u-grid-item @click="toServe(serveList[3])">
            <u-image
              width="100rpx"
              height="100rpx"
              :src="require('@/static/userCenter/shdz.png')"
              shape="circle"
              style="margin-bottom: 0px"
            ></u-image>
            <tui-button type="black" plain link>收货地址</tui-button>
          </u-grid-item>
          <u-grid-item @click="toServe(serveList[4])">
            <u-image
              width="100rpx"
              height="100rpx"
              :src="require('@/static/userCenter/gdfw.png')"
              shape="circle"
              style="margin-bottom: 0px"
            ></u-image>
            <tui-button type="black" plain link>更多服务</tui-button>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <!-- 注销 -->
    <u-button
      :custom-style="customStyle"
      :hair-line="false"
      shape="circle"
      v-if="showLoginOut"
      @click="loginOut"
    >
      <i class="custom-icon-zhuxiao custom-icon"></i>
      <view style="margin-left: 10px">注销</view>
    </u-button>

    <!-- 说明 -->
    <view class="copyright">
      <!-- Copyright -->
      <view
        class="custom-icon-banquan custom-icon"
        style="color: #97af13; font-size: 24rpx"
      ></view
      >校园e生活提供技术支持
      <tui-button type="warning" openType="feedback" plain link :size="24"
        >意见反馈</tui-button
      >
    </view>

    <!-- 业务合作 -->
    <u-modal
      v-model="showCop"
      :show-cancel-button="true"
      confirm-text="复制"
      title="合作邮箱"
      cancel-text="暂不"
      @confirm="copyContact"
    >
      <view class="slot-content contact">
        <view class="custom-icon-youxiang custom-icon"></view>
        <view style="margin-left: 10px">{{ contactEmail }}</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { jugeIsLogin } from "@/common/js/utils";
export default {
  data() {
    return {
      showCop: false,
      contactEmail: "fleayun@gmail.com", //合作邮箱
      customStyle: {
        marginTop: "20px", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: "rgb(173, 184, 56)",
        width: "65vw",
        color: "#FFFFFF",
        boxShadow: "1px 3px 7px 1px rgb(173, 184, 56)",
      },
      src: require("@/static/userCenter/headerImg.jpeg"),
      showLoginOut: false, //注销按钮
      serveList: [
        // {
        //   title: "积分签到",
        //   iconImg: require("@/static/userCenter/jfqd.png"),
        //   router: "pages/integral/integral",
        // },
        {
          title: "业务合作",
          iconImg: require("@/static/userCenter/lxkf.png"),
          isPoup: true, //代表弹窗
          router: "",
        },
        {
          title: "我的订单",
          iconImg: require("@/static/userCenter/wddd.png"),
          tabbarRouter: true, //代表跨bootomTabbar跳转
          router: "pages/order/userOrder",
        },
        {
          title: "我的信息",
          iconImg: require("@/static/userCenter/wdzl.png"),
          router: "pages/myInfo/myInfo",
        },
        {
          title: "收货地址",
          iconImg: require("@/static/userCenter/shdz.png"),
          router: "pages/chooseAddress/chooseAddress",
        },
        {
          title: "更多服务",
          iconImg: require("@/static/userCenter/gdfw.png"),
          router: "pages/moreServe/moreServe",
        },
      ],
    };
  },
  methods: {
    // 跳转到登录界面
    toLogin() {
      this.$u.route({
        url: "pages/login/login",
      });
    },
    // 退出登录
    loginOut() {
      uni.showModal({
        title: "提示",
        content: "您确定要注销登录吗?",
        cancelText: "取消",
        confirmText: "确定",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.clearStorage();
            this.$u.route({
              url: "pages/login/login",
            });
            this.$u.vuex("vuex_userInfo", {});
          }
        },
      });
    },
    // 是否已经登陆
    // jugeIsLogin() {
    //   return new Promise((resolve, reject) => {
    //     if (this.vuex_userInfo.isLogin) {
    //       resolve();
    //     } else {
    //       reject();
    //     }
    //   });
    // },
    // 路由跳转
    toServe(info) {
      jugeIsLogin()
        .then(() => {
          if (info.isPoup) {
            // this.showCop = true;
          } else if (info.tabbarRouter) {
            this.$u.route({
              type: "switchTab",
              url: info.router,
            });
          } else {
            this.$u.route({
              url: info.router,
            });
          }
        })
        .catch(() => {
          this.$u.route({
            url: "pages/login/login",
          });
        });
    },
    // 复制合作邮箱
    copyContact() {
      uni.setClipboardData({
        data: this.contactEmail,
      });
    },
  },
  onLoad() {
    // 判断是否登录
    if (!this.vuex_userInfo.isLogin) {
      this.$u.route({
        url: "pages/login/login",
      });
    }
  },
  onShow() {
    this.showLoginOut = this.vuex_userInfo.isLogin ? true : false;
    console.log(this.showLoginOut);
    console.log(this.vuex_userInfo.nickName);
  },
};
</script>

<style scoped lang ='less' >
.u-center {
  min-height: 100vh;
  background-color: #f1f8fa;
  .header-img {
    min-height: 350rpx;
    width: 100vw;
    height: 280px;
    /* background-color: #67c23a; */
    background-image: url("https://img-shop.qmimg.cn/s16/images/2020/01/20/9a82219bedcae5c2.jpeg");
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    padding-top: 200rpx;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    .the-name {
      color: #666666;
      font-size: 35rpx;
      margin-top: 10rpx;
    }
    /* .the-edit-info {
      color: #666666;
      font-size: 25rpx;
      margin-top: 5rpx;
    } */
  }
  .my-servse {
    position: relative;
    top: -50px;
    margin: 0 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 10px 10px 10px -10px rgba(51, 51, 51, 0.1);
    .the-serve-kind {
      margin: 20rpx;
      /* display: grid;
      grid-template-rows: repeat(2, 150rpx);
      grid-template-columns: repeat(4, 1fr);
      place-content: space-evenly space-between;
      grid-gap: 10px;
      padding: 5px;
      color: #919293;
      .per-kind {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
      } */
    }
  }
  .copyright {
    position: absolute;
    bottom: 10px;
    color: #919293;
    font-size: 24rpx;
    width: 100vw;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .contact {
    height: 70px;
    width: 100%;
    line-height: 70px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
</style>
